<template>
  <div class="dashboard-container"> 
    <el-row style="height: 250px;"  class="flextopbotoom" :gutter="20">
      <el-col :span="6">
    <el-card class="cart" :body-style="cartstyle" shadow="hover">
      <i class="el-icon-s-promotion"></i>
      今日成交金额:{{today.orderPrice}}
    </el-card>
  </el-col>
      <el-col :span="6">
    <el-card class="cart" shadow="hover">
      <i class="el-icon-s-promotion"></i>
      今日交易量:{{today.ordernum}}
    </el-card>
  </el-col>

  <el-col :span="6">
    <el-card class="cart" shadow="hover">
      <i class="el-icon-s-promotion"></i>
      今日浏览量:{{today.view}}
    </el-card>
  </el-col>
  <el-col :span="6">
    <el-card class="cart" shadow="hover">
      <i class="el-icon-s-promotion"></i>
       用户数量:{{today.userSum}}
    </el-card>
  </el-col>
  <el-col :span="6">
    <el-card class="cart" shadow="hover">
      <i class="el-icon-s-promotion"></i>
       待付款订单:{{today.waitOrder}}
    </el-card>
  </el-col>
  <el-col  :span="6">
    <el-card class="cart" shadow="hover">
      <i class="el-icon-s-promotion"></i>
       代理数量:{{today.agent}}
    </el-card>
  </el-col>
  <el-col  :span="6">
    <el-card class="cart" shadow="hover">
      <i class="el-icon-s-promotion"></i>
       代理折扣率:70%
    </el-card>
  </el-col>

</el-row>

    <!--  点击量表格 -->
    <!--  订单表格 -->


    <!-- <div class="leida"  ref="tu1"></div> -->
    <div>
    <div class="select" >
  

    
       <span 
       v-for="( item ,index ) in date"  
       @click="select=index"
       :class="{selected: index ==select }">{{item}}</span>
     

     
    </div>
    <div class="leida"  ref="tu2"></div>
  </div>
  <div>


  </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { echart1 ,today as todaydata}  from '@/api/index'
// import { asyncRoutes }  from '@/router/index'
export default {
  name: 'home',
  data(){
    return {
      
      select:0,
      date:["近七天","本月","近三个月","一年"],
      today:{
        ordernum:0,
        orderPrice:0,
        waitOrder:0,
        view:0,
        userSum:0,

      },
      cartstyle:{ 
          // height:'100px'
      },
   
option2 :{

  xAxis: {
    type: 'category',
    data: ['1号', '2号', '3号',"4号","5号","6号","7号"]
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['view','Order']

  },
  yAxis: {
    type: 'value'
  },
  emphasis: {
    focus: 'none',
    blurScope: 'coordinateSystem'
},
  series: [
    {
      name:"view",
      data: ['15', '200', '150','200','10',3,60],
      type: 'line'
    },
    {
      name:"Order",
      data: ['150', '30', '50', '150',200,10,3],
      type: 'line'
    }
  ]
}

    } 
  } , 

 async created() {  
  // this.$router.addRoutes(asyncRoutes)
    // console.log("路由",this.$router.addRoutes);
  this.render()
   
  //  console.log("图表数据",this.option2 );

  },  


  methods: {
      senddata(){
      
          console.log(   );
        let    a   =   new FormData()
        a.append('file', this.$refs.abc.files[0])
        abc({
          url:"/",
          method:"post",
          data:a
        })
      },

   async  render(){

      let  selectTime  =[  7 , new Date().getDate(), 90 , 365 ]
        
    let result =   await  Promise.all( [todaydata( ),echart1({ num :selectTime[this.select] })] )
    let data    =  result[1]
console.log("data",result[0]);
  
    console.log("  this.option2.series[1].data ",  this.option2.series[1].data );
   this.option2.series[0].data = data.viewdata.map(  v => v?.viewtotal)

   var crr =  data.orderdata.sort( (a ,b) =>{ 
                    if( b.days > a.days  ){
                            return -1
                    }else{
                        return 1
                    }
  })


  console.log('crr' ,crr);
  data.viewdata.forEach( (v,i)=>{
      if(v.days != crr[i].days){
        crr.splice(i,0,  {  days: v.days , totolPrice:0  , count:0 } )
    
      }
  })

   this.option2.series[1].data = crr.map( v =>  v.count)
   console.log("日期", data.viewdata);
   this.option2.xAxis.data = data.viewdata.map(  v => v.days)
                     
    var  num = 0
    console.log('result[0].data.Order',result[0].data.Order);
    var num2= 2
   result[0].data.Order?.forEach(  v => {
        if(v.status== 3){
      
            num = num +v.actualPrice
        }else{
          num2 = num2+1
        }
    });
    this.today.orderPrice =num 
    this.today.waitOrder = num2

    this.today.ordernum = result[0].data.Order.length
    this.today.view = result[0].data.view?.viewtotal
    this.today.orderPrice = num
    this.today.userSum = result[0].data.usersum
    this.today.agent = result[0].data.agent


   
  }
  },
  mounted() {
    // console.log(this.$refs.tu1);
    // this.$echarts.init(this.$refs.tu1).setOption(this.option);
    this.$echarts.init(this.$refs.tu2).setOption(this.option2);
  },  
  watch:{
    select:'render',
    option2:{
      handler(newValue, oldValue) {
        console.log("监听触发");
        this.$echarts.init(this.$refs.tu2).setOption(this.option2);
      },
      deep: true
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}

.leida{
   height: 300px;
}
 .flextopbotoom{
  display: flex;
  flex-flow: wrap;
  align-content: space-around;
  
   .cart  {
    color: red;
    i{ 
      font-size: 80px;
      vertical-align: middle;
    }
  

  }

}

.select{
  overflow: hidden;
  height: 3rem;
  display: flex;
  justify-content: flex-end;
  align-self: center;
   span{ 
    padding: 0.4rem;
    border: 1px solid  #366496 ;
    margin-top: 1rem;
   }
   span.selected{ 
   background:366496 ;
   color: #ffff;
}

}

.selected{ 
   background-color:#366496 ;
   color: #ffff;
}
</style>
